<template>
  <div>
    <el-card style="padding: 18px;">
      <el-row style="margin-bottom: 20px;">
        <el-button type="primary" @click="add">添加工作模式</el-button>
      </el-row>
      <!-- biaoge -->
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="工作模式编号"
        />
        <el-table-column
          prop="name"
          label="工作模式"
        />
        <el-table-column
          prop="workPatternType"
          label="类型 "
        >
          <template v-slot="{row}">
            <span v-if="row.workPatternType===1">礼拜制</span>
            <span v-else>连续制</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="workDate"
          label="工作日期 "
        />
        <el-table-column
          prop="workEndMinute1"
          label="工作时间 "
        >
          <template v-slot="{row}">
            <span>{{ (row.workEndMinute1/60).toFixed(2) +'小时' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="workPatternType"
          label="操作 "
        >
          <template v-slot="{row}">
            <el-button class="operate" style="color: #419eff;" @click="update(row)">编辑</el-button>
            <span>|</span>
            <el-button class="operate" style="color: #f66c9a;" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" justify="center" style="margin-top: 20px;">
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
    <!-- 模态框 -->
    <SortModel :id="id" :visible.sync="dialogVisible" :type="type" />
  </div>
</template>

<script>
import SortModel from './components/sortModel'
export default {
  components: {
    SortModel
  },
  data() {
    return {
      tableData: [],
      id: NaN,
      type: NaN,
      params: {
        page: 1,
        pageSize: 10
      },
      total: 1,
      dialogVisible: false
    }
  },
  methods: {
    add() {
      this.dialogVisible = true
      this.id = NaN
    }
  }

}
</script>

  <style scoped lang="scss">
  .operate {
    background-color: transparent;
      border: none;
      color:#419eff ;
  }
  :deep .el-dialog__header{
      background-color: #f3f4f7;
  }
  :deep .el-dialog__body{
      padding: 30px 50px;
  }
  :deep .el-dialog__footer{
      text-align: center;
  }
  :deep .is-active{
      color: #000;
      font-size: 16px;
      font-weight: 700;
  }
  :deep .el-form-item{
      padding: 0 15px;
  }
  </style>

